<template>
  <div class="public-views gift">
    <div class="public-inner">
      <pubilc-sub-nav :navList="GiftSubNav"></pubilc-sub-nav>
      <div class="gift-left">
        <div class="left-game">
          <div class="game-left">
            <i :style="'background-image: url('+ GiftDetails.sidebarGame.icon + ')'"></i>
            <h1>感恩节{{GiftDetails.sidebarGame.name}}大礼包</h1>
            <h2>{{GiftDetails.sidebarGame.name}}</h2>
            <p>礼包售价
              <span>免费</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;礼包适用平台
              <span>安卓</span>
            </p>
            <p>有效范围
              <span>全服</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;剩余数量
              <span>10/20</span>
            </p>
            <p>有效时间
              <span>2017-10-12 至2017-10-13</span>
            </p>
          </div>
          <div class="game-right">
            <a href="javascript:;">领取礼包</a>
            <a href="javascript:;">下载游戏</a>
          </div>
        </div>
        <div class="left-content">
          <h3 class="home-title">礼包内容</h3>
          <ul>
            <li>招财符（大）*2</li>
            <li>招财符（大）*2</li>
            <li>元宝券（大）*2</li>
            <li>元宝券（大）*2</li>
            <li>双倍经验（2小时）*3</li>
            <li>双倍经验（2小时）*3</li>
          </ul>
          <h3 class="home-title">使用方法</h3>
          <ol>
            <li>1.从本站下载
              <span>《齐天大圣3D》</span>游戏</li>
            <li>2.登录并领取礼包，获取礼包码</li>
            <li>3.进入游戏——主界面——福利大厅——兑换礼包</li>
            <li>4.填写礼包——立即领取</li>
          </ol>
        </div>
        <div class="left-bottom">
          <h3 class="home-title">该游戏其他礼包</h3>
          <div class="bottom-swiper">
            <div class="swiper-list" v-swiper:toSwiper="GiftSwiper">
              <div class="swiper-wrapper">
                <div class="swiper-slide list-item" v-for="(item, index) in GiftDetails.gameGift">
                  <h3>{{item.title}}</h3>
                  <p>剩余数量
                    <span>{{item.number}}</span>
                    <i>/{{item.total}}</i>
                  </p>
                  <p>截止时间
                    <span>{{item.time}}</span>
                  </p>
                  <a href="javascript:;">领取礼包</a>
                </div>
                <div class="swiper-slide list-item" v-for="(item, index) in GiftDetails.gameGift">
                  <h3>{{item.title}}</h3>
                  <p>剩余数量
                    <span>{{item.number}}</span>
                    <i>/{{item.total}}</i>
                  </p>
                  <p>截止时间
                    <span>{{item.time}}</span>
                  </p>
                  <a href="javascript:;">领取礼包</a>
                </div>
              </div>
              <!-- Add Arrows -->
              <div class="swiper-button-next"></div>
              <div class="swiper-button-prev"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="gift-right">
        <right-sidebar-rob></right-sidebar-rob>
        <right-sidebar-play v-if="GiftGame" :list="GiftGame"></right-sidebar-play>
      </div>
    </div>
  </div>
</template>

<script>
const PubilcSubNav = import('@/components/PublicSubNav.vue')
const rightSidebarRob = import('@/components/rightSidebarRob.vue')
const rightSidebarPlay = import('@/components/rightSidebarPlay.vue')
export default {
  components: {
    PubilcSubNav,
    rightSidebarRob,
    rightSidebarPlay
  },
  asyncData({ store, route }) {
    const s = parseInt(Math.random() * 200 + 1)
    const e = parseInt(Math.random() * 15 + 10)
    return store.dispatch('fetchGiftGame', { start: s, end: e, doAjax: 'game', gameId: route.query.giftId, cache: true })
  },
  title() {
    return `米娱游戏_礼包详情`
  },
  computed: {
    GiftGame: function() {
      return this.$store.state.GiftGame
    },
    GiftDetails: function() {
      return this.$store.state.GiftDetails
    }
  },
  data() {
    return {
      GiftSubNav: [
        { text: '礼包', href: '/gift', activate: false },
        { text: '礼包详情', href: '/details/gift?giftId' + this.$route.query.giftId, activate: true }
      ],
      GiftSwiper: {
        slidesPerView: 2,
        slidesPerColumn: 3,
        spaceBetween: 30,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.gift-left {
  width: 900px;
  float: left;
  .left-game {
    padding: 30px;
    overflow: hidden;
    height: 165px;
    box-shadow: 1px 1px 10px 1px #ddd;
    background: #fff;
    .game-left {
      padding-left: 190px;
      position: relative;
      float: left;
      i {
        width: 165px;
        height: 165px;
        border-radius: 15px;
        position: absolute;
        left: 0;
        top: 0;
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }
      h2 {
        line-height: 60px;
        color: #ffa93a;
        font-size: 16px;
      }
      p {
        margin-bottom: 16px;
        font-size: 14px;
      }
      span {
        color: #ffa93a;
        margin-left: 5px;
      }
    }
    .game-right {
      padding-left: 34px;
      width: 175px;
      border-left: 1px solid #eee;
      float: right;
      a {
        display: block;
        width: 100%;
        text-align: center;
        line-height: 56px;
        font-size: 16px;
        color: #333;
        border-radius: 28px;
        font-weight: 600;
        &:nth-child(1) {
          background: #ffa93a;
          margin-top: 16px;
        }
        &:nth-child(2) {
          background: #fee051;
          margin-top: 30px;
        }
      }
    }
  }
  .left-content {
    padding: 0 15px 20px;
    margin: 20px 0;
    height: 380px;
    box-shadow: 1px 1px 10px 1px #ddd;
    background: #fff;
    h3 {
      line-height: 60px;
    }
    ul {
      padding: 0 0 30px 15px;
      border-bottom: 1px solid #eee;
      overflow: hidden;
      li {
        float: left;
        width: 340px;
        font-size: 14px;
        line-height: 24px;
        color: #333;
      }
    }
    ol {
      margin-top: -10px;
      padding-left: 15px;
      li {
        line-height: 38px;
        color: #333;
        font-weight: 600;
        span {
          color: #2cd0ff;
        }
      }
    }
  }
  .left-bottom {
    height: 625px;
    background: #fff;
    box-shadow: 1px 1px 10px 1px #ddd;
    overflow: hidden;
    padding: 0 15px;
    h3 {
      line-height: 60px;
    }
    .bottom-swiper {
      width: 650px;
      margin: 10px auto;
    }
    .swiper-list {
      height: 500px;
      .list-item {
        width: 278px;
        height: 150px;
        border: 1px solid #2cd0ff;
        color: #2cd0ff;
        float: left;
        position: relative;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -o-box-sizing: border-box;
        h3 {
          line-height: 52px;
          padding-left: 20px;
        }
        p {
          padding-left: 20px;
          margin-bottom: 10px;
          color: #999;
          span {
            margin-left: 10px;
            color: #2cd0ff
          }
        }
        a {
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          line-height: 44px;
          text-align: center;
          font-size: 18px;
          font-weight: bold;
          color: #fff;
          background-color: #2cd0ff;
          &:before {
            content: '';
            width: 100%;
            height: 8px;
            background-image: url('../../assets/icon/details_game_icon_01.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            position: absolute;
            left: 0;
            top: -4px;
          }
        }
        &:nth-child(3n+2) {
          border: 1px solid #ffa93a;
          color: #ffa93a;
          p {
            padding-left: 20px;
            margin-bottom: 10px;
            color: #999;
            span {
              margin-left: 10px;
              color: #ffa93a
            }
          }
          a {
            background-color: #ffa93a;
            &:before {
              background-image: url('../../assets/icon/details_game_icon_02.png');
              background-size: 100% 100%;
            }
          }
        }
        &:nth-child(3n+3) {
          margin-right: 0;
          border: 1px solid #88d42f;
          color: #88d42f;
          p {
            padding-left: 20px;
            margin-bottom: 10px;
            color: #999;
            span {
              margin-left: 10px;
              color: #88d42f
            }
          }
          a {
            background-color: #88d42f;
            &:before {
              background-image: url('../../assets/icon/details_game_icon_03.png');
              background-size: 100% 100%;
            }
          }
        }
      }
    }
  }
}

.gift-right {
  width: 260px;
  float: right;
}
</style>